<template>
  <el-dialog
    :title="!dataForm.id ? $t('brand.add') : $t('user.editBtn')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="closeDialog"
    width="630px"
  >
    <el-form
      @submit.native.prevent
      class="dialog-form"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      :label-width="this.$i18n.t('language') === 'English' ? '150px' : '80px'"
    >
      <el-form-item :label="$t('outlet.tagName')" prop="name">
        <el-input
          size="small"
          maxlength="36"
          v-model="dataForm.name"
          style="width: 270px"
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('sys.orderNum')" prop="seq">
        <el-input-number
          style="width: 270px"
          v-model="dataForm.seq"
          :placeholder="$t('sys.orderNum')"
          size="small"
          controls-position="right"
          :min="-99999"
          :max="9999999"
        ></el-input-number>
      </el-form-item>

      <el-form-item :label="$t('sys.parentId')">
        <el-select
          style="width: 270px"
          size="small"
          v-model="dataForm.parentId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in dataList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="visible = false">
        {{ $t("remindPop.cancel") }}
      </div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">
        {{ $t("remindPop.confirm") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  import { deepCopy } from "@/utils";
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      var validateTitle = (rule, value, callback) => {
        if (String(value).trim() === "") {
          callback(new Error(this.$i18n.t("shop.tagNameNotNull")));
        } else {
          callback();
        }
      };
      return {
        visible: false,
        id: 0,
        dataForm: {
          name: "",
          parentId: 0,
          seq: 0,
        },
        isSubmit: false,
        dataRule: {
          name: [
            {
              required: true,
              message: this.$i18n.t("shop.tagNameNotNull"),
              trigger: "blur",
            },
            { validator: validateTitle, trigger: "blur" },
          ],
        },
      };
    },
    components: {},
    mounted() {},
    methods: {
      init(item) {
        this.dataForm = {
          name: "",
          parentId: "",
          seq: 0,
        };
        this.visible = true;
        if (item && item.id) {
          this.id = item.id;
          this.dataForm = deepCopy(item);
          if (this.dataForm.parentId == 0) {
            this.dataForm.parentId = "";
          }
        }
      },
      // 提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return;
          }
          this.$http({
            url: this.$http.adornUrl("/platform/shopTag"),
            method: "post",
            data: this.$http.adornData({
              ...this.dataForm,
              parentId: !this.dataForm.parentId ? 0 : this.dataForm.parentId,
              grade: this.dataForm.parentId ? 1 : 0,
            }),
          }).then(() => {
            this.$message({
              message: this.$i18n.t("outlet.success"),
              type: "success",
            });
            this.visible = false;
          });
        });
      },
      // 选择分类改变时同步改变dataForm中数据
      handleChange(value) {
        if (value.length > 0) {
          this.dataForm.categoryId = value[value.length - 1];
        } else {
          this.dataForm.categoryId = 0;
        }
      },
      closeDialog() {
        this.$emit("refreshChange");
        this.$refs.dataForm.resetFields();
        this.id = 0;
      },
    },
  };
</script>

<style lang="scss" scoped></style>
